<template>
  <div>

    <el-table :data="heroes"  border stripe @selection-change="selectMany">
      <el-table-column type="selection" prop="id"></el-table-column>
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="name" label="名字"></el-table-column>
      <el-table-column prop="weapon" label="武器"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="danger" round @click="deleteById(scope.row.id)">删除</el-button>
            <el-button type="warning" round @click="selectById(scope.row.id)">修改</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addHeroShow" round>添加</el-button>
    <el-button type="danger" @click="deleteMany" round>删除选中</el-button>


    <el-dialog :visible.sync="showUpdateHero" title="修改" width="30%">
        <span>
          <el-form ref="myForm" :model="hero" :rules="rules" label-width="70px" label-position="left">
            <el-form-item label="名字" prop="name">
              <el-input type="text" v-model="hero.name"></el-input>
            </el-form-item>
             <el-form-item label="武器" prop="weapon">
              <el-input type="text" v-model="hero.weapon"></el-input>
            </el-form-item>
             <el-form-item label="价格" prop="price">
              <el-input type="number" v-model="hero.price"></el-input>
            </el-form-item>
          </el-form>
        </span>
      <span slot="footer">
          <el-button type="primary" @click="updateHero">确定</el-button>
          <el-button type="danger" @click="closeDialog">取消</el-button>
        </span>
    </el-dialog>


    <el-dialog :visible.sync="showAddHero" title="添加" width="30%">
        <span>
          <el-form ref="myForm" :model="hero" :rules="rules" label-width="70px" label-position="left">
            <el-form-item label="名字" prop="name">
              <el-input type="text" v-model="hero.name"></el-input>
            </el-form-item>
             <el-form-item label="武器" prop="weapon">
              <el-input type="text" v-model="hero.weapon"></el-input>
            </el-form-item>
             <el-form-item label="价格" prop="price">
              <el-input type="number" v-model="hero.price"></el-input>
            </el-form-item>
          </el-form>
        </span>
      <span slot="footer">
          <el-button type="primary" @click="addHero">确定</el-button>
          <el-button type="danger" @click="closeAdd">取消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  name: "show",
  data(){
    return {
      showAddHero:false,
      showUpdateHero:false,
      heroes:[],
      hero:{},
      ids:[],
      rules:{
        name:[
          {required:true,message:"名字不能为空",trigger:"blur"}
        ],
        weapon:[
          {required:true,message:"武器不能为空",trigger:"blur"}
        ],
        price:[
          {required:true,message:"价格不能为空",trigger:"blur"}
        ]
      }
    }
  },
  methods:{
    selectAll(){
      this.axios({
        method:'get',
        url:'/hero/showAll.do'
      }).then((resp)=>{
        this.heroes=resp.data
      })
    },deleteById(id) {
      this.$confirm("确定要删除这条信息吗","删除提示",{
        confirmButtonText:"确定删除",
        cancelButtonText:"取消删除",
        type:"warning"
      }).then(()=>{
        /*1.点击确认删除按钮后做删除操作*/
        this.axios({
          method:'get',
          url:'/hero/deleteById.do',
          params:{
            id:id
          }
        }).then((resp)=>{
          /*1.1 删除后在查询展示*/
          this.selectAll()
          /*1.2 消息提示删除成功*/
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }).catch((error)=>{
          /*1.2 消息提示删除失败*/
          this.$message({
            type:"success",
            message:"删除失败"
          })
        })
      }).catch(()=>{
        /*2. 点击取消删除按钮后操作*/
      })
    },selectById(id){
      this.$confirm("确认修改这条信息吗","修改提示",{
        confirmButtonText:"确认修改",
        cancelButtonText:"取消修改",
        type:"warning"
      }).then(()=>{
        this.axios({
          method:'get',
          url:"/hero/selectById.do",
          params:{
            id:id
          }
        }).then((resp)=>{
          this.hero=resp.data;
          this.showUpdateHero=true
        })
      }).catch(()=>{

      })

    },closeDialog(){
      this.showUpdateHero=false;
      this.hero={}
    },updateHero(){
      this.axios({
        method:'get',
        url:'/hero/updateHero.do',
        params: this.hero
      }).then((resp)=>{
        this.showUpdateHero=false;
        this.selectAll();
        this.hero={}
        /*消息提示修改成功*/
        this.$message({
          type:"success",
          message:"修改英雄信息成功"
        })
      }).catch((error)=>{
        this.$message({
          type:"warning",
          message:"修改英雄信息失败"
        })
      })
    },addHeroShow(){
      this.$confirm("确认添加一条信息吗","添加提示",{
        confirmButtonText:"确认添加",
        cancelButtonText:"取消添加",
        type:"primary"
      }).then(()=>{
        this.showAddHero='true'
      }).catch(()=>{

      })
    }
    ,addHero(){
      this.axios({
        method:'get',
        url:'/hero/addHero.do',
        params:this.hero
      }).then((resp)=>{
        this.showAddHero=false;
        this.hero={}
        this.selectAll();
        this.$message({
          type:"success",
          message:"添加成功"
        })
      }).catch((error)=>{
        this.$message({
          type:"warning",
          message:"添加失败"
        })
      })

    },closeAdd(){
      this.showAddHero=false
      this.hero={}
    },selectMany(val){
      this.ids=[]
      for(let i=0;i<val.length;i++){
        this.ids.push(val[i].id)
      }
    },deleteMany(){
      this.$confirm("确认删除选中的多条信息吗","删除提示",{
        confirmButtonText:"确认删除",
        cancelButtonText:"取消删除",
        type:"warning"
      }).then(()=>{
        this.axios({
          method:'get',
          url:'/hero/deleteMany.do',
          params:{
            ids:this.ids
          },
          paramsSerializer:params => {return qs.stringify(params, {arrayFormat:'repeat'})}
        }).then((resp)=>{
          this.selectAll()
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }).catch(()=>{
          this.$message({
            type:"warning",
            message:"删除失败功"
          })
        })
      }).catch(()=>{

      })
    }

  },
  created() {
    this.selectAll()
  }
}
</script>

<style scoped>

</style>
